import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useTranslation } from 'react-i18next';
import HomeScreen from '~/screens/Home/HomeScreen';
import MyScreen from '~/screens/Mine/MyScreen';
import CricleScreen from '~/screens/Cricle/CricleScreen';
import HealthScreen from '~/screens/Health/HealthScreen';
import BottomTabBar from './BottomTabBar';

const Tab = createBottomTabNavigator();
export default function MainTabNavigator() {
    const { t } = useTranslation();
    return (
        <Tab.Navigator initialRouteName={'Home'} tabBar={(props: any) => <BottomTabBar {...props} />}>
            <Tab.Screen
                name="Home"
                component={HomeScreen}
                options={{
                    tabBarLabel: t('tabbar.t1'),
                    headerShown: false,
                }}
            />
            <Tab.Screen
                name="Health"
                component={HealthScreen}
                options={{
                    tabBarLabel: t('tabbar.t2'),
                    headerShown: false,
                }}
            />
            {/* <Tab.Screen
                name="Cricle"
                component={CricleScreen}
                options={{
                    tabBarLabel: t('tabbar.t3'),
                    headerShown: false,
                }}
            /> */}
            <Tab.Screen
                name="Personage"
                component={MyScreen}
                options={{
                    tabBarLabel: t('tabbar.t4'),
                    headerShown: false,
                }}
            />
        </Tab.Navigator>
    );
}
